﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
<style type="text/css">
#header {
    background-image: url(tp/tp2.jpg);
    color:white;
    height:168px;
    width:1202px;
   
}
#nav {
    line-height:30px;
    background-color:#e6acd0;
    height:650px;
    width:280px;
    float:left;
    padding:5px;	      
}
#section {

    background-image: url(tp/tp1.jpg);
    height:650px;
    width:650px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:#0b9cf0;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}

    .menu_list {
    width: 268px;
    margin: 0;
    }
     
    .menu_head {
    height: 47px;
    line-height: 47px;
    padding-left: 38px;
    font-size: 14px;
    color: #0c1011;
    cursor: pointer;
    border: 1px solid #f1f1f1;
    position: relative;
    margin: 0px;
    font-weight: bold;
    background: #51a9f18c;
    }
     
    .menu_list .current {
    background: #51a9f18c;
    }
     
    .menu_nva {
    line-height: 38px;
    border-left: 1px solid #51a9f18c;
    background: #fff;
    border-right: 1px solid #51a9f18c;
    }
     
    .menu_nva a {
    display: block;
    height: 38px;
    line-height: 38px;
    padding-left: 38px;
    color: #0c0d1b;
    background: #fff;
    text-decoration: none;
    border-bottom: 1px solid #51a9f18c;
    }
     
    .menu_nva a:hover {
    text-decoration: none;
    }


    .title  ul{
    list-style-type: none;
    padding: 0px;
    float: left;
    position: relative;
}
.title ul li {
    width: 160px;
    height: 56px;
    text-align: center;
    float: left; }
.title ul li a {     color: #09ccee;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    text-decoration: none;
    line-height: 56px; }
.title ul a:hover{     color:  #0ab2d2; }
.title .move{     height: 4px;
    width: 130px;
    border-top: 4px solid  #0ab2d2;
    position: absolute;
    left: 0;
    top: 52px;
    transition: left .2s ease-in-out 0s;
    -webkit-transition: left .2s ease-in-out 0s;
    -moz-transition: left .2s ease-in-out 0s;
    -o-transition: left .2s ease-in-out 0s;
     }
li:nth-child(1):hover~ .move{   
   left: 0px; }
li:nth-child(2):hover~ .move{     left: 160px; }
li:nth-child(3):hover~ .move{     left: 320px; }
li:nth-child(4):hover~ .move{     left: 480px; 
}
    </style>
</head>

<body>

<div id="header">

</div>

<div id="nav">
</br>
    <div id="firstpaneDiv" class="menu_list">

        <h3 class="menu_head current">产品类型</h3>
        
        <div style="display:block" class="menu_nva">
        <a href="橱柜门.html">橱柜门</a>
        <a href="不锈钢门.html">不锈钢门</a>
        <a href="推拉门.html">吊趟推拉门</a>
        <a href="衣柜门.html">衣柜门</a>
        <a href="淋浴门.html">淋浴门</a>
        <a href="原木门.html">原木实木门</a>
        <a href="厕所门.html">厕所门</a>
        </div>
    </div>

        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
        </script>
<script>
$(document).ready(function(){
$("#firstpaneDiv .menu_nva:eq(0)").show();
$("#firstpaneDiv h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_nva").slideToggle(200).siblings("div.menu_nva").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_nva:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_nva").slideDown(400).siblings("div.menu_nva").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
</script>
</div>


<div id="section">
   
    <div class="title">
        <ul>
            <li><a href="#">店铺首页</a></li>
            <li><a href="新产品.html">最新产品</a></li>
            <li><a href="#">更多优惠</a></li>
            <li><a href="#">维修安装</a></li>
            <li class="move"> </li>
        </ul>
    </div>
</div>

<div id="footer">
版权所有：百年旺门业  <br>
店铺地址：古镇六坊大塘新村东大街16号<br>
商家联系电话：13232539489---18933314410<br>
电话/传真：0760-89831729
</div>

</body>
</html>
